/**
 * useRoutes()
 *
 *    作用：能够通过写 配置的方式来描述路由
 *
 *    语法：
 *
 *       const element =  useRoutes([route, route])
 */

import { Outlet, useRoutes } from "react-router-dom";

export default function App() {
  const element = useRoutes([
    {
      path: "/home",
      element: (
        <div>
          <h2>Home</h2>
          <Outlet />
        </div>
      ),
      children: [
        {
          path: "/home/a",
          element: <div>A</div>,
        },
        {
          path: "/home/b",
          element: <div>B</div>,
        },
      ],
    },
    {
      path: "/about",
      element: <div>About</div>,
    },
  ]);

  return (
    <div>
      <h1>useRoutes</h1>

      <div>{element}</div>
    </div>
  );
}
